<template>
	<view v-if="homeworkList.length>0">
		<view v-for="(item,index) in homeworkList" :key='index'>
			<view class="title" @click="toggle(index)">
				<image class="title-img" :class="openIndex==index?'title-img-rotate':''" src="/static/course/arrow-round.png"></image>
				<view class="title-content">{{item.title}}</view>
			</view>
			<view class="box">
				<view class="box-inner">
						<view class="collapse-content" 
						:class="[openIndex==index?'open':'unopen',secondIndex == item.children.length - 1 ? 'last-box' : '']" 
						v-for="(secondItem,secondIndex) in item.children"
						:key='secondIndex'>
							<view class="son" v-if="secondItem.indexType=='0'">{{secondItem.title}}</view>
							<view v-if="secondItem.indexType=='0'">
								<homework-item @updateIndex='updateIndex' @showDialog='showDialog' 
								v-for="(thirdItem,thirdIndex) in secondItem.children" 
								:key="thirdIndex" 
								:item="thirdItem"
								></homework-item>
							</view>

							<homework-item @showDialog='showDialog' 
							@updateIndex='updateIndex'
							v-if="secondItem.indexType=='1'" 
							:item="secondItem"
							></homework-item>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else class="empty">暂无数据</view>
</template>

<script>
	import homeworkItem from './homeworkItem.vue'
	export default {
		components: {
			homeworkItem
		},
		props: {
			homeworkList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				openIndex: 0,
				}
		},
		methods: {
			updateIndex(payload){
				this.$emit('updateIndex',payload);
			},
			showDialog(time){
				this.$emit('showDialog',time)
			},
			toggle(index) {
				if (this.openIndex == index) {
					this.openIndex = -1;
					return;
				}
				this.openIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collapse-content {
		overflow: hidden;
		transition: all .3s;
	}
	.box {
		//border-left: 1px solid #e4e4e4;
		margin-left: 12upx;
	}
	.box-inner {
		overflow: hidden;
	}

	.title {
		padding-top: 50upx;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		line-height: 1;

		&-content {
			flex: 1;
		}

		&-img {
			width: 30upx;
			height: 30upx;
			transition: all 0.3s;
			margin-right: 12upx;

			&-rotate {
				transform: rotate(180deg);
			}
		}
	}

	.son {
		margin-left: 60upx;
		font-size: 24upx;
		color: #333333;
		line-height: 64upx;
		margin-top: 16upx;
		position: relative;
		&::before {
			content: "";
			display: inline-block;
			width: 20upx;
			height: 20upx;
			background-color: #e4e4e4;
			border-radius: 50%;
			margin-right: 12upx;
		}
		&::after{
			content: "";
			position: absolute;
			width: 60upx;
			height: 1px;
			background-color: #e4e4e4;
			left: -60upx;
			top: 32upx;
		}
	}



	.open {
		height: auto;
		ocap: 0;
		transform: translateY(0);
		border-left: 1px solid #e4e4e4;
	}
	.open.last-box {
			border-left: 0;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				width: 1px;
				height: 48upx;
				background-color: #e4e4e4;
				top: 0upx;
				left: 0;
			}
		}
	.unopen {
		height: 0px;
		alpha: 1;
		transform: translateY(-50%);
	}

	.comment {
		margin-left: 60upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.icon-comment {
		width: 20upx;
		height: auto;
		margin-right: 4upx;
	}
	.empty {
		margin-top: 60upx;
		text-align: center;
		font-size: 28upx;
		color: #666666;
	}
	
</style>
